<template>
	<!--我的待开赛-->
	<scroll-view class="page-content" :scroll-top="scrollTop" scroll-y="true" @scrolltolower="loadmore()">
		<view class="index-header">
			<!--导航-->
			<view class="nav">
				<view class="nav-item" @click="handleActive(1)"
					:class="[active === 1 ? 'active' : active === 2 ? '' : '']">
					我领队的({{ld_num===''? 0 : ld_num }})
				</view>
				<view class="nav-item" @click="handleActive(2)"
					:class="[active === 1 ? '' : active === 2 ? 'active' : '']">
					我参与的({{cy_num===''? 0 : cy_num }})
				</view>
			</view>
		</view>
		<view class="page-body">
			<!--当前比赛-->
			<view class="body-item" v-if="active=== 1">
				<template v-if="datalist1 && datalist1.length > 0 ">
					<block v-for="(item,index) in datalist1" :key="index">
						<race-list :img="item.image " :title="item.title" :time="item.game_start_time"
							:sign_statu="item.status" @click="clickdet(item.id)"
							></race-list>
					</block>
					<!-- 上拉加载 -->
					<view class="det-con-more">
						<load-more :loadmore="load_more1"></load-more>
					</view>
				</template>
				<!--无数据-->
				<empty v-else no-full type="noData"></empty>
			</view>

			<!--往期回顾-->
			<view class="body-item" v-if="active === 2">
				<template v-if="datalist2 && datalist2.length > 0 ">
					<block v-for="(item,index) in datalist2" :key="index">
						<race-list :img="item.image" :title="item.title" :time="item.game_start_time"
							@click="clickdet(item.id)">
						</race-list>
					</block>
					<!-- 上拉加载 -->
					<view class="det-con-more">
						<load-more :loadmore="load_more2"></load-more>
					</view>
				</template>
				<!--无数据-->
				<empty v-else no-full type="noData"></empty>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue"
	import raceList from "@/pages/index/components/race_list.vue"
	import companyList from "@/pages/index/components/company_list.vue"
	import loadMore from '@/components/uni-load-more/load-more.vue'
	import {
		getgamelists,
		getuserawaitlists, //获取待开赛比赛列表【我的】
	} from '@/common/api.js'
	export default {
		components: {
			uniSwiperDot,
			raceList,
			companyList,
			loadMore
		},
		data() {
			return {
				scrollTop: 0,
				noData: false,
				load_more1: '', //下拉加载文字
				load_more2: '', //下拉加载文字
				load_sta:false, //是否是加载状态
				active: 1, //tab导航
				lists: [],
				datalist1: [],
				datalist2: [],
				code: '',
				formData1: {
					page: 1,
					limit: 10,
					type: '1'
				},
				formData2: {
					page: 1,
					limit: 10,
					type: '2'
				},
				ld_num:'',
				cy_num:''
			}
		},
		computed: {
			...mapState(['hasLogin', 'openid'])
		},
		onShow() {
			this.getdata1(this.formData1);
			this.getdata2(this.formData2);
		},
		onLoad() {
			console.log(1234)
		},
		methods: {
			//下拉加载
			loadmore() {
				console.log('下拉加载');
				let _self = this;
				_self.load_sta = true;
				if(_self.active === 1){
					_self.formData1.page++;
					_self.getdata1(_self.formData1);
				}else if(_self.active === 2){
					_self.formData2.page++;
					_self.getdata2(_self.formData2);
				}
			},
			
			//获取当前比赛数据
			getdata1(formData) {
				console.log(234,formData)
				getuserawaitlists(formData).then(res => {
					console.log(123, res)
					this.ld_num = res.count
					let datalist = res.data
					if(datalist && datalist.length>0){
						datalist.forEach(item => {
							this.$set(item, 'image', item.img[0])
						})
						if(this.load_sta){
							if (datalist && datalist.length < 10) {
								this.load_more1 = '没有更多了';
								this.datalist1 = this.datalist1.concat(datalist);
							} else {
								this.load_more1 = '加载中...';
									this.datalist1 = this.datalist1.concat(datalist);
							}
						}else{
							if (datalist && datalist.length < 10) {
								this.load_more1 = '没有更多了';
								this.datalist1 = datalist;
							} else {
								this.load_more1 = '加载中...';
								this.datalist1 = datalist;
							}
						}
					}
				})
			}, 
			//获取往期回顾数据
			getdata2(formData) {
				getuserawaitlists(formData).then(res => {
					console.log(123, res)
					this.cy_num = res.count
					let datalist = res.data
					if(datalist && datalist.length>0){
						datalist.forEach(item => {
							this.$set(item, 'image', item.img[0])
						})
						if(this.load_sta){
							if (datalist && datalist.length < 10) {
								this.load_more2 = '没有更多了';
								this.datalist2 = this.datalist2.concat(datalist);
							} else {
								this.load_more2 = '加载中...';
									this.datalist2 = this.datalist2.concat(datalist);
							}
						}else{
							if (datalist && datalist.length < 10) {
								this.load_more2 = '没有更多了';
								this.datalist2 = datalist;
							} else {
								this.load_more2 = '加载中...';
								this.datalist2 = datalist;
							}
						}
					}
				})
			},
			change(e) {
				this.current = e.detail.current
			},
			handleActive(e) {
				let _self = this;
				_self.active = e;
				_self.load_sta = false;
				if (_self.active === 1) {
					_self.formData1.type = '1'
					_self.getdata1(_self.formData1);
				}
				if (_self.active === 2) {
					_self.formData2.type = '2'
					_self.getdata2(_self.formData2);
				}
			},
			//跳转比赛详情
			clickdet(id) {
				uni.navigateTo({
					url: `/pages/user/entryDetail?id=${id}`
				})
			},
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			/* if (this.$refs.indexPage) {
				this.$refs.indexPage.getData()
				console.log(1231)
			} */
		}
	}
</script>

<style lang="scss">
	.page-content {
		height: 100vh;
		width: 100vw;
	}

	.det-con-more {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
		color: #bbb;
		font-size: 24rpx;
	}

	.index-header {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 70rpx;
		background-color: #f5f5f5;
		position: relative;

		.nav {
			height: 100rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			text-align: center;
			font-size: 28rpx;
			color: #999;

			.nav-item {
				flex: 1;
				position: relative;

				&::after {
					content: '';
					width: 0;
					height: 8rpx;
					background-color: #02BB6F;
					border-radius: 4px;
					position: absolute;
					left: 50%;
					bottom: -12rpx;
					transform: translateX(-50%);
					transition: .3s;
				}

				&.active {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;

					&::after {
						width: 60rpx;
					}
				}
			}
		}
	}

	.page-body {
		height: calc(100vh - 120rpx);
		background-color: #f5f5f5;
		.body-item {
			margin: 20rpx 32rpx 30rpx 32rpx;
			height: 100%;
		}
	}
</style>
